<template>
  <div class="global_bg">
    <VantNavigationBar title="已失效的"></VantNavigationBar>
    <van-card
      v-for="product in myProductsList"
      :key="product.product_id"
      :price="product.product_price"
      :desc="product.product_dsc"
      :title="product.product_name"
      :thumb="'http://localhost:8090/' + product.product_imge"
    >
    </van-card>
    <div v-if="myProductsList.length === 0">
      <van-empty
        image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
        image-size="80"
        description="还没有商品"
      />
    </div>
  </div>
</template>

<script>
import VantNavigationBar from '@/components/Navbar'
import mine from '@/api/mine.js'
import { Card, Empty } from 'vant'
import { ref } from 'vue'

export default {
  components: {
    VantNavigationBar,
    [Card.name]: Card,
    [Empty.name]: Empty,
  },
  setup() {
    const myProductsList = ref([])

    mine.getfailureTage().then((res) => {
      if (res.status === 200) {
        myProductsList.value = res.data
      }
    })

    return {
      myProductsList,
    }
  },
}
</script>

<style scoped>
.van-card__thumb::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明的灰色遮罩 */
}
</style>
